<template>
  <div class="admin-page">
    <div class="admin-content">
      <p style="text-align: right;">
        <Button @click="add">新增</Button>
      </p>
      <p class="admin-header"><span class="name">名称</span><span class="status">操作</span></p>
      <div>
        <!--<Collapse v-model="value1">-->
        <!--<Panel name="1">-->
        <!--乔布斯-->
        <p class="admin-item" slot="content" v-for="item in algorithmList">
          <span class="name">{{item.name}}</span>
          <span class="status">
                                <i-switch v-model="item.function==1" @on-change="onOffSwitch(item)"></i-switch>
            <!--<i-switch @on-change="onOffSwitch(item)" :value="item.function==1"></i-switch>-->
                                <Button @click="modify(item)">修改</Button>
                                <Button @click="del(item.id)">删除</Button>
                                <Button>测试</Button>
                            </span>
        </p>
        <!--</Panel>-->
        <!--</Collapse>-->
      </div>
      <!--<p class="admin-item">-->
      <!--<span class="name">血管分割</span>-->
      <!--<span class="status">-->
      <!--<i-switch v-model="switch1" @on-change="onOffSwitch"></i-switch>-->
      <!--<Button>修改</Button>-->
      <!--<Button>删除</Button>-->
      <!--<Button>测试</Button>-->
      <!--</span>-->
      <!--</p>-->
    </div>
    <Modal v-model="modal1" class-name="algorithm-admin" width="400">
      <div>
        <p><span class="name">全称</span><span class="input"><input type="text"
                                                                  v-model="algorithmInfo.nick"></span>
        </p>
        <p><span class="name">算法缩写</span><span class="input"><input type="text"
                                                                    v-model="algorithmInfo.name"></span>
        </p>
        <p><span class="name">GPU_CPU</span><span class="input"><input type="text"
                                                                       v-model="algorithmInfo.gpu_cpu"></span>
        </p>
        <p><span class="name">算法输出</span><span class="input"><input type="text"
                                                                    v-model="algorithmInfo.output_args"></span>
        </p>
        <p><span class="name">是否输出图片</span><span class="input"><input type="text"
                                                                      v-model="algorithmInfo.output_img"></span>
        </p>
        <p>
          <span class="name">编程语言</span>
          <!--<span class="input"><input type="text" v-model="language"></span>-->
          <Select v-model="algorithmInfo.language" style="width: 200px;">
            <Option v-for="item in languageList" :value="item.value" :key="item.value">{{item.label}}
            </Option>
          </Select>
        </p>
        <!--<Upload action="http://localhost:3001/uploadAlgorithm" style="text-align: center"-->
        <!--:on-success="uploadSuccess" :on-error="failToUpload" v-if="addModifyAlgorithm==0">-->
        <!--<Button icon="ios-cloud-upload-outline">上传文件</Button>-->
        <!--</Upload>-->
        <!--<form  v-if="addModifyAlgorithm==0" class="upload-file"><input type="file" multiple @change="onFileChange"></form>-->
        <p style="text-align: center">
          <button v-if="addModifyAlgorithm==0" class="upload-file">
            <span>上传文件</span>
            <form><input type="file" multiple @change="onFileChange"></form>
          </button>
        </p>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="modal1=false">取消</Button>
        <Button type="primary" size="large" @click="confirm">确定</Button>
      </div>
    </Modal>
    <Modal width="20" v-model="modal2">
      <p style="font-size: 20px;margin: 20px 0;">确定删除该算法？</p>
      <div slot="footer">
        <Button type="text" size="large" @click="modal2=false">取消</Button>
        <Button type="primary" size="large" @click="delAlgorithm">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import axios from 'axios'
  import {BackURL} from "../js/config";
  import {apiPre} from "../js/config";

  export default {
    name: "admin",
    data() {
      return {
        switch1: false,
        modal1: false,
        modal2: false,
        value1: 1,
        algorithmInfo: {
          name: '',
          nick: '',
          gpu_cpu: '',
          output_args: '',
          output_img: '',
          language: '',
          algorithm_order: '',
          description: ''
        },
        languageList: [
          {
            value: 'Python',
            label: 'Python'
          },
          {
            value: 'Matlab',
            label: 'Matlab'
          }
        ],
        algorithmList: [],
        submitOrNot: false,
        uploadFileList: 0,
        addModifyAlgorithm: 0,
        deleteAlgorithm: 0,
        filearr: [],
        formData: ''
      }
    },
    methods: {
      onOffSwitch(obj) {
        console.log(obj.function)
        obj.function = obj.function == 0 ? 1 : 0;
        // this.modifyAlgorithm(obj)
        axios.put(apiPre + 'uploadAlgorithmInfo', {
          info: obj
        }).then((res) => {
          console.log(res)
          console.log('item', item)
        }).catch((err) => {
          this.getAlgorithmList()
        })
      },
      modifyAlgorithm(item) {
        if (!this.algorithmInfo.name || !this.algorithmInfo.nick || !this.algorithmInfo.gpu_cpu || !this.algorithmInfo.output_args || !this.algorithmInfo.output_img || !this.algorithmInfo.language) {
          this.$Message.info({
            content: '请填写完整信息'
          });
          this.modal1 = true
          return
        }
        axios.put(apiPre + 'uploadAlgorithmInfo', {
          info: item
        }).then((res) => {
          console.log(res)
          console.log('item', item)
        }).catch((err) => {
          this.getAlgorithmList()
        })
      },
      confirm() {
        if (this.addModifyAlgorithm == 0) {
          if (!this.algorithmInfo.name || !this.algorithmInfo.nick || !this.algorithmInfo.gpu_cpu || !this.algorithmInfo.output_args || !this.algorithmInfo.output_img || !this.algorithmInfo.language) {
            this.$Message.info({
              content: '请填写完整信息'
            });
            return
          }
          // if (this.uploadFileList == 0) {
          //     this.$Message.info({
          //         content: '请上传文件'
          //     });
          //     return
          // }
          if (!this.formData) {
            this.$Message.info({
              content: '请上传文件'
            });
            return
          }
          this.modal1 = false;
          console.log(this.uploadFileList)
          console.log('this.formData confirm', this.formData)
          this.formData.append('alinfo', JSON.stringify(this.algorithmInfo))
          // axios.post(apiPre + 'uploadAlgorithmInfo', {
          //     info: this.algorithmInfo
          // }).then((res) => {
          //     console.log(res);
          //     this.getAlgorithmList()
          // }).catch((err) => {
          //
          // })

          var config = {
            headers: {
              // 'Content-Type': 'multipart/form-data',
              'Content-Type': 'application/x-www-form-urlencoded',
              "token": window.localStorage.getItem('screeningLogin')
            }
          }
          axios.post(apiPre + 'uploadAlgorithm', this.formData, config).then((res) => {
            console.log(res.data)
            this.getAlgorithmList()
          }).catch((err) => {
            console.log(err)
          })
        } else {
          this.modal1 = false;
          this.modifyAlgorithm(this.algorithmInfo)
        }
      },
      uploadSuccess(res) {
        console.log('uploadSuccess', res);
        this.algorithmInfo.algorithm_order = res.msg;
        this.submitOrNot = true;
        this.uploadFileList++
      },
      failToUpload() {

      },
      add() {
        this.modal1 = true;
        this.addModifyAlgorithm = 0;
        this.algorithmInfo = {}
      },
      modify(obj) {
        console.log(obj)
        this.modal1 = true;
        this.addModifyAlgorithm = 1;
        this.algorithmInfo = obj;
      },
      del(num) {
        this.modal2 = true;
        this.deleteAlgorithm = num;
      },
      delAlgorithm() {
        console.log('this.deleteAlgorithm', this.deleteAlgorithm)
        axios.delete(apiPre + 'uploadAlgorithmInfo', {
          data: {id: this.deleteAlgorithm}
        }).then((res) => {
          this.modal2 = false
          this.getAlgorithmList()
        }).catch((err) => {

        })
      },
      getAlgorithmList() {
        axios.get(apiPre + 'uploadAlgorithmInfo').then((res) => {
          console.log('algorithmList', res)
          this.algorithmList = res.data.data
        }).catch((err) => {

        })
      },
      onFileChange(e) {
        console.log('onFileChange', this.formData)
        this.filearr = [];
        var files = e.target.files;
        console.log('files', files)
        for (var i = 0; i < files.length; i++) {
          this.filearr.push(files[i]);
        }
        this.formData = new FormData();
        for (var i = 0; i < this.filearr.length; i++) {
          this.formData.append("file", this.filearr[i]);
        }
        console.log('this.formData', this.formData.getAll('file'));

        // var config = {
        //     headers: {
        //         // 'Content-Type': 'multipart/form-data',
        //         'Content-Type': 'application/x-www-form-urlencoded',
        //         "token": window.localStorage.getItem('screeningLogin')
        //     }
        // }
        //
        // axios.post(apiPre + 'uploadAlgorithm', this.formData, config).then((res) => {
        //     // this.addList(res.data)
        //     console.log(res.data)
        //     // if (Array.isArray(res.data)) {
        //     //     var data = res.data.sort(this.compare)
        //     //     this.addList(data);
        //     // } else {
        //     //     this.addList(res.data);
        //     // }
        //     // console.log(data)
        // }).catch((err) => {
        //     console.log(err)
        // })
      }
    },
    created() {
      this.getAlgorithmList()
    }
  }
</script>

<style scoped lang="scss">
  .admin-page {
    position: absolute;
    top: 125px;
    width: 100%;
    margin-top: 50px;
    .admin-content {
      margin: 0 20%;
      .admin-header {
        font-size: 20px;
        display: flex;
        justify-content: space-around;
        .name {
          flex: 1;
          text-align: center;
        }
        .status {
          flex: 3;
          text-align: right;
          margin-right: 100px;
        }
      }
      .admin-item {
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        border-bottom: 1px solid #d0d0d0;
        .name {
          font-size: 18px;
          flex: 1;
          text-align: center;
          height: 45px;
          line-height: 45px;
        }
        .status {
          flex: 3;
          text-align: right;
          button {
            font-size: 18px;
          }
        }
      }
    }
  }
</style>
